@import "../../../../../assets/css/Master/index";

.PlayFooter {
  width: 100%;
  //height: 9rem;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 300;
  background-color: #fff;
  box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.08);

  .content {
    display: flex;
    flex-flow: column;

    .schedule {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0.5rem;
      margin-top: 1rem;
      font-size: .9rem;
      color: @Master9;

      .fasr-div {
        width: 10%;
      }

      .nth-div {
        width: 80%;
        height: .1rem;
        position: relative;
        top: -.1rem;

        .fasr-p {
          width: 100%;
          height: 1px;
          background-color: @Master9;
          opacity: 0.17;
          position: absolute;
          top: .05rem;
          z-index: 250;
        }

        .last-p {
          width: 40%;
          height: 1px;
          background-color: @MasterC;
          position: absolute;
          top: .05rem;
          z-index: 300;
        }

        .schedule-span {
          position: absolute;
          left: 40%;
          top: -0.5rem;
          z-index: 310;
          border-radius: 100%;
          width: 1.5rem;
          height: 1.5rem;
          margin-top: -.13rem;
          margin-left: -.3rem;
          background-color: #fff;
          box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);

          i {
            position: absolute;
            left: 40%;
            top: -0rem;
            z-index: 140;
            border-radius: 100%;
            width: .4rem;
            height: .4rem;
            margin-left: -.05rem;
            margin-top: .5rem;
            background-color: @Master9;
            opacity: .9;
          }
        }
      }

      .last-div {
        width: 10%;
      }
    }

    .Features {
      margin: 1.2rem 1rem 1.8rem 1rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: @fontSize15;
      color: @Master9;

      div {
        width: 4rem;
        height: 4rem;
        display: flex;
        //border-radius: 100%;
        justify-content: center;
        align-items: center;

        .icon-zitidaxiao, .icon-yuedubeijing1, .icon-bofangsudu1, .icon-gengduo2 {
          font-size: 2.4rem;
        }
      }

      .control {
        width: 4rem;
        height: 4rem;
        margin: 0 1.5rem;
        position: relative;
        display: flex;
        border-radius: 100%;
        justify-content: center;
        align-items: center;
        background-color: #FFF;
        color: @Master9;
        box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.08);

        .icon-bofang {
          margin-left: .3rem;
        }

        .span-a {
          position: absolute;
          top: .45rem;
          left: .45rem;
          display: inline-block;
          width: 3rem;
          height: 3rem;
          border: 1px solid #e2e2e2;
          border-radius: 100%;
          animation: spin 700ms infinite linear;
          -webkit-animation: spin 700ms infinite linear;

          &::after {
            content: '';
            display: inline-block;
            position: absolute;
            top: -.2rem;
            left: 45%;
            width: .3rem;
            height: .3rem;
            border-left: 5px solid #fff;
          }

          &::before {
            content: '';
            display: inline-block;
            position: absolute;
            bottom: -.2rem;
            left: 45%;
            width: .3rem;
            height: .3rem;
            border-left: 5px solid #fff;
          }
        }

        .span-b {
          position: absolute;
          top: .45rem;
          left: .45rem;
          display: inline-block;
          width: 3rem;
          height: 3rem;
          border: 1px solid rgb(36, 36, 42);
          border-radius: 100%;
          animation: spin 700ms infinite linear;
          -webkit-animation: spin 700ms infinite linear;

          &::after {
            content: '';
            display: inline-block;
            position: absolute;
            top: -.2rem;
            left: 45%;
            width: .3rem;
            height: .3rem;
            border-left: 5px solid #7c7c7f;
          }

          &::before {
            content: '';
            display: inline-block;
            position: absolute;
            bottom: -.2rem;
            left: 45%;
            width: .3rem;
            height: .3rem;
            border-left: 5px solid #7c7c7f;
          }
        }

        .span-c {
          position: absolute;
          top: .45rem;
          left: .45rem;
          display: inline-block;
          width: 3rem;
          height: 3rem;
          border: 1px solid #e2e2e2;
          border-radius: 100%;
          animation: spin 700ms infinite linear;
          -webkit-animation: spin 700ms infinite linear;

          &::after {
            content: '';
            display: inline-block;
            position: absolute;
            top: -.2rem;
            left: 45%;
            width: .3rem;
            height: .3rem;
            border-left: 5px solid #fff;
          }

          &::before {
            content: '';
            display: inline-block;
            position: absolute;
            bottom: -.2rem;
            left: 45%;
            width: .3rem;
            height: .3rem;
            border-left: 5px solid #fff;
          }
        }
      }

      .fangda {
        animation: fangda .5s;
        -webkit-animation: fangda .5s;
      }
    }
  }
}

@keyframes fangda {
  0% {
    transform: scale(1, 1)
  }
  20% {
    transform: scale(1.08, 1.08)
  }
  40% {
    transform: scale(.92, .92)
  }
  60% {
    transform: scale(1.05, 1.05)
  }
  80% {
    transform: scale(.95, .95)
  }
  100% {
    transform: scale(1, 1)
  }
}

@-webkit-keyframes fangda {
  0% {
    transform: scale(1, 1)
  }
  20% {
    transform: scale(1.08, 1.08)
  }
  40% {
    transform: scale(.92, .92)
  }
  60% {
    transform: scale(1.05, 1.05)
  }
  80% {
    transform: scale(.95, .95)
  }
  100% {
    transform: scale(1, 1)
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
